// Read tabs border_radius from NexT config and set in "$tbr px" to use it as string variable in this CSS section.
$tbr = hexo-config('tabs.border_radius') is a 'unit' ? unit(hexo-config('tabs.border_radius'), px) : 0;

.post-body .tabs {
  margin-bottom: 20px;
}

.post-body .tabs, .tabs-comment {
  display: block;
  padding-top: 10px;
  position: relative;

  ul.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    margin-bottom: -1px;
    padding: 0;

    +mobile-smallest() {
      display: block;
      margin-bottom: 5px;
    }

    li.tab {
      background: white;
      border-bottom: 1px solid $gray-lighter;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      border-top: 3px solid transparent;
      flex-grow: 1;
      list-style-type: none;

      +mobile-smallest() {
        border-bottom: 1px solid transparent;
        border-left: 3px solid transparent;
        border-right: 1px solid transparent;
        border-top: 1px solid transparent;
      }

      if ($tbr > 0) {
        border-radius: $tbr $tbr 0 0;

        +mobile-smallest() {
          border-radius: $tbr;
        }
      }

      if (hexo-config('tabs.transition.tabs')) {
        the-transition-ease-out();
      }

      a {
        border-bottom: initial;
        display: block;
        line-height: 1.8em;
        outline: 0;
        padding: .25em .75em;
        text-align: center;

        i {
          width: (18em / 14);
        }

        if (hexo-config('tabs.transition.labels')) {
          the-transition-ease-out();
        }
      }

      &.active {
        border-bottom: 1px solid transparent;
        border-left: 1px solid $table-border-color;
        border-right: 1px solid $table-border-color;
        border-top: 3px solid $orange;

        +mobile-smallest() {
          border-bottom: 1px solid $table-border-color;
          border-left: 3px solid $orange;
          border-right: 1px solid $table-border-color;
          border-top: 1px solid $table-border-color;
        }

        a {
          color: $link-color;
          cursor: default;
        }
      }
    }
  }

  .tab-content {
    .tab-pane {
      border: 1px solid $table-border-color;
      padding: 20px 20px 0 20px;

      if ($tbr > 0) {
        border-radius: $tbr;
      }

      &:not(.active) {
        display: none;
      }

      &.active {
        display: block;

        if ($tbr > 0) {
          &:nth-of-type(1) {
            border-radius: 0 $tbr $tbr $tbr;

            +mobile-smallest() {
              border-radius: $tbr;
            }
          }
        }
      }
    }
  }
}
